<template>
  <el-dialog
    :visible.sync="userVisible"
    title="选择接收人"
    width="60%"
    @close="msgItemVisible">
    <el-table border :data="tableUserItemData" v-loading="itemLoading" :row-key="getRowKeys" ref="userTable"  @select="selectionChange" @select-all="selectAll">
      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
      <el-table-column prop="loginname" label="登录名"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <div slot="empty">
        当前列表暂无数据
      </div>
    </el-table>
    <div class="left-page">
      <el-pagination
        :total="itemPage.total"
        :current-page="itemPage.current"
        @size-change="itemSizeChange"
        @current-change="itemCurrentChange"
        :page-sizes="[2, 10, 20, 30, 50]"
        :page-size="itemPage.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
      />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="userVisible = false" icon="el-icon-circle-close">取 消</el-button>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="saveUser">确 定</el-button>
    </div>

  </el-dialog>
</template>
<script>
  import {fetchList as userList} from '@/api/admin/user'
  import {tableUserItemOption} from '@/const/crud/message/message'
  export default {
    data(){
      return{
        userVisible: this.show,
        itemLoading: false,
        itemPage: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 10 // 每页显示多少条
        },
        tableCheckList: [],
        tableUserItemData: [],
        tableUserItemOption: tableUserItemOption,

        resultData: this.checkList,
      }
    },
    props:{
      show:{
        type: Boolean,
        default: false,
      },
      checkList:{
        type: Array,
        default: () => {
          return []
        },
      },
      msgId: {
        default: null,
      }
    },
    watch: {
      show(val){
        this.userVisible = val
        if (val){
          this.getUserList()
        }
      },
      userVisible(val){
        if (val){
          this.resultData.forEach(item => {
            this.tableCheckList.push({
              userId: item.receiverUserId,
              username: item.receiverUserName
            })
          })
        }else{
          this.tableCheckList = []
          this.$refs.userTable.clearSelection()
          this.$emit('update:show', val)
        }
      },
      checkList(val){
        this.resultData = val
      },
      'itemPage.current'(){
        this.getUserList()
      }
    },
    methods:{
      //选择发送人弹窗
      getUserList() {
        this.itemLoading = true
        userList(this.itemPage).then(response => {
          this.tableUserItemData = response.data.data.records
          this.itemPage.total = response.data.data.total
          this.itemPage.size = response.data.data.size
          this.itemPage.current = response.data.data.current
          this.itemLoading = false

          this.$refs.userTable.clearSelection()
          //编辑时自动选中列表已选择的数据
          if (this.resultData.length && this.tableUserItemData.length) {
            this.tableUserItemData.forEach((table) => {
              if ((this.tableCheckList.find((key) => key.userId == table.userId))) {
                this.$refs.userTable.toggleRowSelection(table, true);
                // this.tableCheckList.push(table)
              }
            })
          }

        }).catch(err => {
          this.itemLoading = false
        })
      },
      getRowKeys(row){
        return row.userId
      },
      selectionChange(val, row) {
        if (row ){
          this.tableCheckList.forEach((key, index) => {
            if (key.userId == row.userId) {
              this.tableCheckList.splice(index, 1)
              return false
            }
          })
        }
        val.forEach(item => {
          if (!(this.tableCheckList.find((key) => key.userId == item.userId))) {
            this.tableCheckList.push(
              // item,
              {
                userId: item.userId,
                username: item.username,
              }
            )
          }

        })
      },
      selectAll(val) {
        if (val.length){
          val.forEach(item => {
            if (!(this.tableCheckList.find((key) => key.userId == item.userId))) {
              this.tableCheckList.push(
                {
                  userId: item.userId,
                  username: item.username,
                }
              )
            }

          })
        } else{
          this.tableUserItemData.forEach(item => {
            this.tableCheckList.forEach((key,index) => {
              if (key.userId == item.userId) {
                this.tableCheckList.splice(index, 1)
              }

            })
          })
        }
      },
      //保存用户信息
      saveUser(){
        // if (!this.tableCheckList.length){
        //   this.$message.error('请选择发送人')
        //   return false
        // }

        this.resultData = []
        this.tableCheckList.forEach(item => {
          this.resultData.push({
            msgId: this.msgId,
            receiverUserId: item.userId,
            receiverUserName: item.username
          })
        })
        let userStr = this.resultData.map((item => {
          return item.receiverUserName
        })).join('、')

        this.userVisible = false
        this.tableCheckList = []
        this.$emit('save', this.resultData, userStr)
      },


      itemSizeChange(pageSize) {
        this.itemPage.size = pageSize
        this.getUserList()
      },
      itemCurrentChange(current) {
        this.itemPage.current = current
      },
      msgItemVisible(){
        this.userVisible = false
        this.itemPage.current = 1
      },
    }
  }
</script>
<style lang="scss" scoped>
  .left-page{
    text-align: right;
    margin-top: 10px;
  }
</style>

